import React from 'react';
import { Menu } from 'antd';
import { AppstoreOutlined, AlertOutlined } from '@ant-design/icons';
import { useNavigate, Outlet, useLocation } from 'react-router-dom';
import styles from './Layout.module.less';

const Layout: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  // 获取当前选中的菜单项
  const getSelectedKey = () => {
    const path = location.pathname;
    if (path.includes('/service/layout/yujing')) return 'monitoring';
    // ... 其他路径判断
    return '';
  };

  const menuItems = [
    {
      key: 'assets',
      icon: <AppstoreOutlined />,
      label: '资产运维',
      children: [
        {
          key: 'monitoring',
          icon: <AlertOutlined />,
          label: '数据监测及预警',
        },
        {
          key: 'engineering',
          label: '工单管理',
        },
        {
          key: 'statistics',
          label: '统计报表',
        },
        {
          key: 'record',
          label: '审处结果',
        }
      ]
    }
  ];

  const handleMenuClick = ({ key }: { key: string }) => {
    switch (key) {
      case 'monitoring':
        navigate('/service/layout/yujing');
        break;
      case 'engineering':
        // 其他页面的导航
        navigate('/service/layout/gongdan');
        break;
      case 'statistics':
        // 其他页面的导航
        navigate('/service/layout/tongji');
        break;
      case 'record':
        // 其他页面的导航
        navigate('/service/layout/shenchu');
        break;
      default:
        break;
    }
  };

  return (
    <div className={styles.layout}>
      <Menu
        mode="inline"
        selectedKeys={[getSelectedKey()]}
        defaultOpenKeys={['assets']}
        items={menuItems}
        onClick={handleMenuClick}
        className={styles.sideMenu}
      />
      <div className={styles.content}>
        <Outlet />
      </div>
    </div>
  );
};

export default Layout; 